<template>
  <transition>
  <div class="push-order-list2">
    <section class="app-main">

      <div class="app-main-content" v-if="shopKeeper==1">
        <div class="app-fixed-top">
        <div class="app-header">
          <span class="type-show">客户名称：<span class="type-content">
            <template v-if="search.applyCustomName==''">全部客户</template>{{search.applyCustomName}}</span></span>
          <mt-button class="btn-filter" type="danger" @click="handleAddOrder">开单</mt-button>
          <!--<mt-button class="btn-filter" type="danger" @click="handleFilter">筛选</mt-button>-->
        </div>
        <mt-navbar v-model="selected" class="tab-store">
          <mt-tab-item id="2"><span class="tab-item-content">维修中<span class="count" v-if="resCount.storeWaitAllotCount!==0">{{resCount.storeWaitAllotCount}}</span></span></mt-tab-item>
          <!--<mt-tab-item id="3"><span class="tab-item-content">施工中<span class="count" v-if="resCount.storeProcessCount!==0">{{resCount.storeProcessCount}}</span></span></mt-tab-item>-->
          <mt-tab-item id="4"><span class="tab-item-content">已修完<span class="count" v-if="resCount.storeWaitTBCCount!==0">{{resCount.storeWaitTBCCount}}</span></span></mt-tab-item>
          <mt-tab-item id="7"><span class="tab-item-content">已提车<span class="count" v-if="resCount.cancelApplyCount!==0">{{resCount.cancelApplyCount}}</span></span></mt-tab-item>

          <mt-tab-item id="5"><span class="tab-item-content">已取消</span></mt-tab-item>
          <mt-tab-item id="6"><span class="tab-item-content">挂账中</span></mt-tab-item>

        </mt-navbar>
        </div>
        <!-- tab-container -->

        <div class="tab-body xunjia-list">
          <ul class="tab-list"
              v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10">
            <li class="item" v-for="item in enquiryList1">
              <div class="item-header">
                {{item.applyCustomName}}<template v-if="!item.applyCustomName">{{item.applyCustomTypeName}}</template>
                <div class="item-sn">{{item.sn}}&nbsp;/&nbsp;内部单号：{{item.innerSn}}</div>
                <span class="item-state ">{{item.storeAllotStatusDesc}}</span>
              </div>
              <div class="item-body">
                <dl class="item-body-content" @click="handleDetails(item.demandId)">
                  <dd><span class="item-addon">客户说明：</span><template v-if="item.applyCustomDesc">{{item.applyCustomDesc}}</template></dd>
                  <dd><span class="item-addon">车牌号/自编号：</span>{{item.carNo}}<template v-if="item.carNo">/</template>{{item.selfNumber}}</dd>
                  <dd><span class="item-addon">车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</span>{{item.carModel}}</dd>
                  <dd v-if="selected=='1'"><span class="item-addon">创建时间：</span>{{item.createDateStr}}</dd>
                  <dd v-if="selected=='2' || selected=='6'"><span class="item-addon">接单时间：</span>{{item.receiveDate}}</dd>
                  <dd v-if="selected=='3'"><span class="item-addon">分派时间：</span>{{item.lastAllotDate}}</dd>
                  <dd v-if="selected=='4'"><span class="item-addon">完工时间：</span>{{item.uploadDate}}</dd>
                  <dd v-if="selected=='5'"><span class="item-addon">取消时间：</span>{{item.cancelDate}}</dd>
                  <dd v-if="selected=='6'"><span class="item-addon">完成时间：</span>{{item.finishDate}}</dd>
                  <dd v-if="selected=='7'"><span class="item-addon">申请时间：</span>{{item.cancelApplyDate}}</dd>
                </dl>
                <div><span class="item-addon"><span class="iconfont icon-didian1"></span>位&nbsp;&nbsp;置：</span>{{item.address}}</div>
              </div><div class="item-footer">
                <mt-button type="danger" @click="handleDetails(item.demandId)">工单详情</mt-button>
              </div>
            </li>
          </ul>

          <div class="line-scale-pulse-out" v-show="loading">
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
          </div>
          <div class="module-none" v-if="showNone">
            <span class="iconfont icon-meiyoudingdan"></span>
            暂无相关工单
          </div>
          <!--<div class="load-finish-tips" v-if="loadTips">-->
            <!--已加载完成-->
          <!--</div>-->
        </div>

        <!--弹窗-列表筛选-->
        <mt-popup
          v-model="popupFilterShow"
          position="right" class="filter-popup">
          <ul class="filter-list">
            <li class="filter-item">
              <span class="addon">条件搜索</span>
            </li>
            <li class="filter-item filter-item-spe">
              <mt-field label="客户名称" placeholder="" v-model="search.applyCustomName"></mt-field>
            </li>
            <li class="filter-item filter-item-spe">
              <mt-field label="工单号/内部单号" placeholder="" v-model="search.sn"></mt-field>
            </li>
            <li class="filter-item filter-item-spe">
              <mt-field label="车牌号/自编号" placeholder="" v-model="search.carNo"></mt-field>
            </li>
            <li class="filter-item filter-item-spe">
              <mt-field label="服务内容" placeholder="" v-model="search.remark"></mt-field>
            </li>
          </ul>
          <ul class="filter-list">
            <li class="filter-item">
              <span class="addon">订单类型</span>
            </li>
            <li class="filter-item filter-item-spe filter-item-select">
              <!--<span class="filter-item-addon">无法完工</span>-->
              <mt-checklist
                title=""
                class="select-wangong"
                v-model="isFinish"
                :options="optionsIsFinish">
              </mt-checklist>
            </li>
          </ul>
          <div class="button-content">
            <div class="button-block-6">
              <mt-button type="default" @click="popupFilterShow=false">取消</mt-button>
            </div>
            <div class="button-block-6">
              <mt-button type="danger" @click="handleSure">确认</mt-button>
            </div>
          </div>
        </mt-popup>
        <!--弹窗-列表筛选-->
      </div>
      <template v-if="shopKeeper==0">
        <mt-navbar v-model="selected">
          <mt-tab-item id="3"><span class="tab-item-content">未完成<span class="count" v-if="resCount.storeProcessCount!==0">{{resCount.storeProcessCount}}</span></span></mt-tab-item>
          <mt-tab-item id="6"><span class="tab-item-content">已完成</span></mt-tab-item>
          <mt-tab-item id="4"><span class="tab-item-content">待确认<span class="count" v-if="resCount.storeWaitTBCCount!==0">{{resCount.storeWaitTBCCount}}</span></span></mt-tab-item>
        </mt-navbar>
        <!-- tab-container -->
        <div class="tab-body xunjia-list">
          <ul class="tab-list"
              v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10">
            <li class="item" v-for="item in enquiryList1">
              <div class="item-header">
                {{item.applyCustomName}}<template v-if="!item.applyCustomName">{{item.applyCustomTypeName}}</template>
                <div class="item-sn">{{item.sn}}&nbsp;/&nbsp;内部单号:{{item.innerSn}}</div>
                <span class="item-state ">{{item.storeAllotStatusDesc}}</span>
              </div>
              <dl class="item-body" @click="handleDetails(item.demandId)">
                <dd><span class="item-addon">客户说明：</span><template v-if="item.applyCustomDesc">{{item.applyCustomDesc}}</template></dd>
                <dd><span class="item-addon">车牌号/自编号：</span>{{item.carNo}}<template v-if="item.carNo">/</template>{{item.selfNumber}}</dd>
                <dd v-if="selected=='3' || selected=='6'"><span class="item-addon">分派时间：</span>{{item.lastAllotDate}}</dd>
                <dd v-if="selected=='6'"><span class="item-addon">完成时间：</span>{{item.finishDate}}</dd>
                <dd v-if="selected=='4'"><span class="item-addon">完工时间：</span>{{item.uploadDate}}</dd>
                <dd><span class="item-addon"><span class="iconfont icon-didian1"></span>位&nbsp;&nbsp;置：</span>{{item.address}}</dd>
              </dl>
              <div class="item-footer">
                <mt-button type="danger" @click="handleDetails(item.demandId)">工单详情</mt-button>
              </div>
            </li>
          </ul>

          <div class="line-scale-pulse-out" v-show="loading">
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
          </div>
          <div class="module-none" v-if="showNone">
            <span class="iconfont icon-meiyoudingdan"></span>
            暂无相关工单
          </div>
          <!--<div class="load-finish-tips" v-if="loadTips">-->
          <!--已加载完成-->
          <!--</div>-->
        </div>
      </template>
    </section>
  </div>
    </transition>
</template>

<script>
  import { Navbar, TabItem,TabContainer, TabContainerItem,Button,Indicator,Toast} from 'mint-ui';

//  Vue.component(Header.name, Header);
export default {
  data () {
    return {
      selected:'',
      shopKeeper:1,
      res:'',
      resCount:'',
      showNone:false,
      loading:false,
      loadTips:false,
      page:1,
      pageSize:10,
      orderByField:'',
      enquiryList:[],
      enquiryList1:[],
      isNeed:false,
      popupFilterShow:false,
      search:{
        applyCustomName:'',
        carNo:'',
        remark:'',
        sn:'',
        incomplete:'',
      },
      isShow:true,
      optionsIsFinish:[
        {
          label:'无法完工',
          value:'1',
        }
      ],
      isFinish:[],
    }
  },

  /**进入路由前判断**/
  beforeRouteEnter (to, from, next) {
    next(vm => {

    if(from.query.stateId!==undefined){
      console.log(from.query.stateId)
      vm.selected=from.query.stateId;
      vm.isNeed=true;
    }else{
      vm.isNeed=false;
    }
  })
  },
  watch:{
    'isFinish'(val){
      console.log(val)
      if(val.length>0){
        this.search.incomplete=1;
      }else{
        this.search.incomplete='';
      }

    },
    'selected'(val){
      this.page=1;
      Indicator.open({
        text: '加载中...',
        spinnerType: 'snake'
      });
      //    获取接单列表
      var params = new URLSearchParams();
      if(val=='1'){
        this.orderByField='create_date'
      }
      if(val=='2'){
        this.orderByField='receiveDate'
      }
      if(val=='3'){
        this.orderByField='lastAllotDate'
      }
      if(val=='4'){
        this.orderByField='lastuploadDate'
      }
      if(val=='5'){
        this.orderByField='cancelDate'
      }
      if(val=='6'){
        this.orderByField='finishDate'
      }
      if(val=='7'){
        this.orderByField='cancelApplyDate'
      }

      const demandData={
        businessType:1,
        applyCustomName:this.search.applyCustomName,
        carNo:this.search.carNo,
        sn:this.search.sn,
        remark:this.search.remark,
        incomplete:this.search.incomplete,
        storeAllotStatus:val,
        orderByField:this.orderByField,
        pageNo:this.page,
        pageSize:this.pageSize,


      }
      params.append('demandData',JSON.stringify(demandData));
      this.$axios({
        method: 'post',
        url:'gp/bu/serviceDemandApp!listDemand.do',
        data:params
      }).then((res)=>{
//        if(res.data.statusCode==200){
        Indicator.close();
        this.res = res.data;
        this.enquiryList = res.data.rows;
        console.log(res,123)
        this.total=res.data.total;
        if(this.enquiryList.length<=0){
          this.showNone=true;
        }else{
          this.showNone=false;
        }
//      }else{
//        Toast({
//          message: res.data.message,
//          position: 'middle',
//          duration:800
//        });
//        Indicator.close();
//      }
    });
    }
  },
  mounted(){
    this.selected='1'
//    this.getCountFlag();

  },
  methods:{
    handleAddOrder(){
      sessionStorage.setItem('isAddOrder','true');
      this.$router.push({path:'/customer-management'})
    },
    handleDetails(id){
      this.$router.push({path:'/push-order-details2',query: {id:id,stateId:this.selected}})
    },
    loadMore() {
      if(this.total==0){
        return false;
      }
      if(this.enquiryList.length<this.total){
        this.loading = true;
        this.page++;
        var params = new URLSearchParams();

        if(this.selected=='1'){
          this.orderByField='createDate'
        }
        if(this.selected=='2'){
          this.orderByField='receiveDate'
        }
        if(this.selected=='3'){
          this.orderByField='lastAllotDate'
        }
        if(this.selected=='4'){
          this.orderByField='lastuploadDate'
        }
        if(this.selected=='5'){
          this.orderByField='cancelDate'
        }
        if(this.selected=='6'){
          this.orderByField='finishDate'
        }
        if(this.selected=='7'){
          this.orderByField='finishDate'
        }

        const demandData={
          businessType:1,
          applyCustomName:this.search.applyCustomName,
          carNo:this.search.carNo,
          sn:this.search.sn,
          remark:this.search.remark,
          incomplete:this.search.incomplete,
          storeAllotStatus:this.selected,
          orderByField:this.orderByField,
          pageNo:this.page,
          pageSize:this.pageSize,
        }
        params.append('demandData',JSON.stringify(demandData));
        this.$axios({
          method: 'post',
          url:'gp/bu/serviceDemandApp!listDemand.do',
          data:params
        }).then((res)=> {
          for(var i=0;i<res.data.rows.length;i++){
          this.enquiryList.push(res.data.rows[i]);
        }
      });
        setTimeout(() => {
          this.loading = false;
      },1000);
      }else{
        this.loadTips=true;
      }

    },

    handleFilter(){
      this.popupFilterShow=true
    },
    getCountFlag(){
      this.page=1;
      var params = new URLSearchParams();
      const demandData={
        businessType:1,
        applyCustomName:this.search.applyCustomName,
        carNo:this.search.carNo,
        sn:this.search.sn,
        remark:this.search.remark,
        incomplete:this.search.incomplete,
        pageNo:this.page,
        pageSize:this.pageSize,
      };
      params.append('demandData',JSON.stringify(demandData));
      this.$axios({
        method: 'post',
        url:'gp/bu/serviceDemandApp!listDemand.do',
        data:params
      }).then((res)=>{
        if(res.data.statusCode==200){
        this.resCount = res.data.object;
      }else{
        Toast({
          message:res.data.message,
          position: 'middle',
          duration:800
        });
      }

    }).catch((error)=>{
        console.log(error)
      });
    },
    handleSure(){
      this.getCountFlag();
      this.page=1;
      var params = new URLSearchParams();
      if(this.selected=='1'){
        this.orderByField='createDate'
      }
      if(this.selected=='2'){
        this.orderByField='receiveDate'
      }
      if(this.selected=='3'){
        this.orderByField='lastAllotDate'
      }
      if(this.selected=='4'){
        this.orderByField='lastuploadDate'
      }
      if(this.selected=='5'){
        this.orderByField='cancelDate'
      }
      if(this.selected=='6'){
        this.orderByField='finishDate'
      }
      if(this.selected=='7'){
        this.orderByField='finishDate'
      }
      const demandData={
        businessType:1,
        applyCustomName:this.search.applyCustomName,
        carNo:this.search.carNo,
        sn:this.search.sn,
        remark:this.search.remark,
        incomplete:this.search.incomplete,
        storeAllotStatus:this.selected,
        orderByField:this.orderByField,
        pageNo:this.page,
        pageSize:this.pageSize,
      }
      params.append('demandData',JSON.stringify(demandData));
      this.$axios({
        method: 'post',
        url:'gp/bu/serviceDemandApp!listDemand.do',
        data:params
      }).then((res)=>{
        if(res.data.statusCode==200){
        console.log(res)
        Toast({
          message: '筛选成功',
          position: 'middle',
          duration:800
        });
        this.popupFilterShow=false;
        this.res = res.data;
        this.enquiryList = res.data.rows;
        console.log(res,123)
        this.total=res.data.total;
      }else{
        Toast({
          message:res.data.message,
          position: 'middle',
          duration:800
        });
      }

    });
    }
  }
}
</script>

<style>

  .push-order-list2 .mint-tab-item-label .count{
    position: absolute;
    top: -8px;
    right:-14px;
    left:inherit;
    display: inline-block;
    width:14px;
    height: 14px;
    border-radius:50%;
    border:1px solid #c34853;
    font-size: 10px;
    letter-spacing:-1px;
    line-height: 16px;
    color:#c34853;
    display: none;
  }
  .push-order-list2 .mint-tab-item-label{
    position: relative;
    font-size:14px;
  }
  .push-order-list2 .mint-navbar{
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .push-order-list2 .mint-navbar .mint-tab-item{
    position: relative;
    padding:18px 0 16px;
  }
  .push-order-list2 .mint-navbar .mint-tab-item .tab-item-content{
    position: relative;
  }
  .push-order-list2 .mint-navbar .mint-tab-item.is-selected{
    color:#007EE5;
    border-bottom:none;
  }
  .push-order-list2 .mint-navbar .mint-tab-item.is-selected{
    color:#007EE5;
    border-bottom:none;
  }
  .push-order-list2 .mint-navbar .mint-tab-item.is-selected:after{
    background: #007EE5;
    position: absolute;
    bottom:2px;
    left: 0;
    right: 0;
    height: 2px;
    content: '';
  }
  .push-order-list2 .mint-navbar .mint-tab-item.is-selected .mint-tab-item-label{
    font-size:15px;
  }
  .push-order-list2 .mint-tab-container{
    padding:12px 12px 0;
  }

  .push-order-list2 .xunjia-list{
    padding:15px;
  }

  .push-order-list2 .xunjia-list .item{
    background: #fff;
    padding:12px 16px 0;
    margin:0 0 16px;
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.05);
    border-radius:4px;
  }
  .push-order-list2 .xunjia-list .item-header{
    position: relative;
    padding:0 0 6px;
    font-size:15px;
    color: #333;
    font-weight: bold;
    border-bottom:1px solid #eee;
  }
  .push-order-list2 .xunjia-list .item-state{
    position: absolute;
    top: 0;
    right: 0;
  }
  .push-order-list2 .xunjia-list .item-body{
    margin: 0;
    padding:8px 0 6px;
    font-size:14.6px;
    color: #888;
  }
  .push-order-list2 .xunjia-list .item-body dd{
    margin: 0 0 5px;
    line-height:20px;
  }
  .push-order-list2 .xunjia-list .item-footer{
    border-top:1px solid #ddd;
    margin:0 -16px;
  }
  .push-order-list2 .xunjia-list .item-footer .mint-button{
    background:none;
    display: block;
    width: 100%;
    height:46px;
    border-radius:0;
    font-size: 16px;
    color:#007EE5
  }
  .push-order-list2 .xunjia-list .item-footer .mint-button:after{
    background:none;
  }
  .push-order-list2 .tab-store a.mint-tab-item{
    /*width:18% !important;*/
    /*min-width:18%;*/
    /*max-width:18%;*/
    width:20% !important;
    min-width:20%;
    max-width:20%;
  }
  .push-order-list2 .item-sn{
    padding:4px 0 0;
    font-size: 13px;
    font-weight:normal;
    color: #999;
  }
  .push-order-list2 .icon-didian1{
    font-weight: bold;
    margin-right:4px;
  }
  .push-order-list2 .item-addon{
    color: #666;
  }

  .push-order-list2 .load-finish-tips{
    padding:4px 0 16px;
    font-size: 14px;
    color:#666;
    text-align: center;
  }
  .push-order-list2 .load-finish-tips:before{
    display: inline-block;
    vertical-align: middle;
    width:40px;
    height: 1px;
    background-color: #bbb;
    content: '';
    margin-right:6px;
  }
  .push-order-list2 .load-finish-tips:after{
    display: inline-block;
    vertical-align: middle;
    width:40px;
    height: 1px;
    background-color: #bbb;
    content: '';
    margin-left:6px;
  }
  .push-order-list2 .module-none{
    padding:50px 0 0;
    font-size: 16px;
    text-align: center;
    color:#999;
  }
  .push-order-list2 .module-none .icon-meiyoudingdan{
    display: block;
    margin:0 0 6px;
    font-size: 50px;
    color:#c4c4c4;
  }

  .push-order-list2 .app-header{
    background: #fff;
    font-size: 14.6px;
    padding:6px 10px;
    border-bottom:1px solid #ddd;
    overflow: hidden;
  }
  .push-order-list2 .type-content{
    color: #007EE5;
  }
  .push-order-list2 .type-show{
    line-height: 38px;
  }
  .push-order-list2 .btn-filter{
    float: right;
    padding:8px 16px;
    height:auto;
    font-size: 14px;
  }
  .push-order-list2 .filter-popup{
    height: 100%;
    width:80%;
    font-size: 14px;
  }
  /*.push-order-list2 .filter-item{*/
  /*border-bottom:1px solid #ddd;*/
  /*}*/
  .push-order-list2 .filter-list .addon{
    display: block;
    padding:12px 12px 0;
    /*border-bottom:1px solid #ddd;*/
  }
  .push-order-list2 .filter-list .addon:before{
    background:#007EE5;
    position: relative;
    top:-2px;
    display:inline-block;
    vertical-align: middle;
    width:4px;
    height:16px;
    content: '';
    margin-right:5px;
  }

  .push-order-list2 .mint-radiolist .mint-cell{
    width:50%;
    display: inline-block;
    vertical-align: middle;
  }
  .push-order-list2 .mint-radiolist .mint-cell-wrapper{
    background:none;
  }
  .push-order-list2 .mint-radiolist .mint-cell:last-child{
    background:none;
  }
  .push-order-list2 .filter-popup .button-content{
    padding:24px 10px 0;
    text-align: center;
    font-size: 0;
  }
  .push-order-list2 .filter-popup .button-block-6{
    display: inline-block;
    width: 50%;
    padding:0 10px;
  }
  .push-order-list2 .filter-popup .button-content .mint-button{
    display: inline-block !important;
    width: 100%;
    font-size: 15px;
  }

  .push-order-list2 .filter-item-spe .mint-cell-value{
    min-height:36px;
    padding:4px 8px;
    border:1px solid #ddd;
    border-radius:6px
  }
  .push-order-list2 .filter-item-spe{
    border-bottom:none
  }
  .push-order-list2 .filter-item-spe .mint-cell-wrapper{
    background:none;
    font-size: 14px;
  }
  .push-order-list2 .filter-item-spe .mint-cell:last-child{
    background:none;
  }
  .push-order-list2 .app-main-content{
    padding:98px 0 0;
  }
  .push-order-list2 .item-body-content{
    margin: 0;
  }

  .push-order-list2 .select-wangong .mint-cell-value{
    border:none !important;
  }
  .push-order-list2 .select-wangong .mint-checklist-label{
    padding: 0;
  }
</style>
